import 'package:flutter/material.dart';
import 'package:flutter_simple_watch/home/home_page.dart';
import 'package:flutter_simple_watch/live/live_page.dart';
import 'package:flutter_simple_watch/user/user_page.dart';
import 'package:flutter_simple_watch/video/video_page.dart';

class AppPage extends StatefulWidget {
  const AppPage({super.key});

  @override
  State<StatefulWidget> createState() => _AppPageState();
}

class _AppPageState extends State<AppPage>
    with TickerProviderStateMixin<AppPage> {
  late TabController controller;

  int currentIndex = 0;
  final HomePage _home = HomePage();
  final VideoPage _video = VideoPage();
  final LivePage _live = LivePage();
  final UserPage _user = UserPage();

  @override
  void initState() {
    super.initState();
    controller = TabController(length: 4, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        clipBehavior: Clip.none,
        alignment: AlignmentDirectional.bottomEnd,
        children: [
          _initTabBarView(),
        ],
      ),
      bottomNavigationBar: _initBottomNavigationBar(),
    );
  }

  Widget _initTabBarView() {
    return IndexedStack(
      index: currentIndex,
      children: <Widget>[_home, _video, _live, _user],
    );
  }

  Widget _initBottomNavigationBar() {
    return Theme(
        data: ThemeData(
            primaryColor: const Color.fromRGBO(255, 255, 255, 1),
            canvasColor: Colors.white,
            textTheme: Theme.of(context)
                .textTheme
                .copyWith(bodySmall: const TextStyle(color: Colors.grey))
                .copyWith(labelSmall: const TextStyle(color: Colors.grey)),
            hintColor: Colors.grey,
            iconTheme: const IconThemeData(size: 18.0, color: Colors.white),
            primaryTextTheme: const TextTheme(
                //设置文本样式
                labelLarge: TextStyle(
                    color: Colors.black,
                    fontSize: 18.0,
                    fontWeight: FontWeight.bold)),
            //设置icon样式
            tabBarTheme: const TabBarTheme(
                labelColor: Colors.black, unselectedLabelColor: Colors.grey)),
        child: BottomNavigationBar(
            fixedColor: Colors.red,
            //选中颜色
            currentIndex: currentIndex,
            //选中第一个tab的索引
            onTap: _onTap,
            //点击选中回调
            type: BottomNavigationBarType.fixed,
            //风格
            selectedFontSize: 10.0,
            //选中文字的大小
            unselectedFontSize: 10.0,
            //未选中文字的大小
            items: [
              BottomNavigationBarItem(
                  icon: (currentIndex == 0) //页面index
                      ? Image.asset('images/home_press.png') //选中时的图标
                      : Image.asset('images/home_normal.png'), //未选中时的图标
                  label: "首页"),
              BottomNavigationBarItem(
                  icon: (currentIndex == 1) //页面index
                      ? Image.asset('images/video_press.png') //选中时的图标
                      : Image.asset('images/video_normal.png'), //未选中时的图标
                  label: "视频"),
              BottomNavigationBarItem(
                  icon: (currentIndex == 2) //页面index
                      ? Image.asset('images/live_press.png') //选中时的图标
                      : Image.asset('images/live_normal.png'), //未选中时的图标
                  label: "直播"),
              BottomNavigationBarItem(
                  icon: (currentIndex == 3) //页面index
                      ? Image.asset('images/user_press.png') //选中时的图标
                      : Image.asset('images/user_normal.png'), //未选中时的图标
                  label: "我的"),
            ]));
  }

  @override
  void dispose() {
    print("app释放.dispose");
  }

  _onTap(int index) {
    setState(() {
      currentIndex = index;
    });
    controller.animateTo(index,
        duration: const Duration(milliseconds: 300), curve: Curves.ease);
  }
}
